<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--1.引入bootstrap框架的样式； -->
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <!--2.引入angularJS框架的样式； -->
    <link rel="stylesheet" href="/angularjs/pagination.css">
    <!--3.引入Layer样式； -->
    <link rel="stylesheet" href="/layer/layer/theme/default/layer.css">
    <!--4.引入jquery框架-->
    <script src="/bootstrap/js/jquery.min.js"></script>
    <!--5.引入boostrap框架的JS-->
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <!--6.引入Layer框架的JS-->
    <script src="/layer/layer/layer.js"></script>
    <!--7.引入angularJS框架-->
    <script src="/angularjs/angular.min.js"></script>
    <!--8.引入angularJS的分页框架-->
    <script src="/angularjs/pagination.js"></script>
    <!--9.自己写的js-->
    <script>
        /*定义一个模块*/
        var app=angular.module("myApp",['pagination']);
        app.controller("myCtrl",function ($scope,$http) {
            /*定义分页属性*/
            $scope.paginationConf={
                currentPage:1,
                itemsPerPage:5, /*每页5条*/
                totalItems:1000, /*总共有多少条*/
                perPageOptions:[5,8,10,20,50], /*每页多少条,可选*/
                onChange:function () {
                    $scope.searchAll($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
                    $scope.selectIds=[]; //点击第二页清空数组
                    $scope.checked=false; //把全选按钮改为不选
                }
            };
            /*定义一个函数,初始化加载页面*/
            var index=-1;
            $scope.getAllUsers=function () {
                index=layer.load(1);
                /*默认第一页,一页5条数据*/
                $scope.searchAll(1,5);
                /*查询角色对应的ID,用户选择查询条件*/
                $http.get("/role/rlist").success(function (data) {
                    $scope.roles=data;
                    $scope.roles.unshift({rid:'0',rname:'请选择'})
                    layer.close(index);
                })
            }

/*            //分页的功能:没有查询条件
            $scope.search=function (pageIndex,pageSize) {
                $http.get("/users/list2.action?pageIndex="+pageIndex+"&pageSize="+pageSize).success(function (data) {
                    $scope.list=data.rows;
                    $scope.paginationConf.totalItems=data.total;
                })
            }*/

            //综合查询,带条件
            $scope.searchAll=function (pageIndex,pageSize) {
                $http.post("/tuser/list?pageIndex="+pageIndex+"&pageSize="+pageSize,$scope.searchEntity).success(function (data) {
                    $scope.list=data.rows;
                    $scope.paginationConf.totalItems=data.total;
                }).error(function () {
                    layer.msg("未知错误")
                })
            }

            //点综合查询,调用上面的方法
            $scope.searchAll2=function () {
                $scope.searchAll($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
            }

            //删除一个用户
            $scope.deleteUsers=function (uid) {
                layer.confirm("您确定要删除吗?",{icon: 3, title:"系统提示:"},
                    function () {
                        $http.get("/tuser/deleteUsers/"+uid).success(function (data) {
                            layer.msg(data.msg,{icon:6});
                            $scope.searchAll2(); //查询完成后再查询当前页的数据
                        })
                    })
            }
            //修改或添加的时候查询所有的角色和对应ID
            $scope.getAllRoles=function(){
                $http.get("/role/rlist").success(function (data) {
                    $scope.roles2=data;
                    $scope.roles2.unshift({rid:'0',rname:'请选择'});
                })
            }
            //点击添加打开模态框并修改状态
            $scope.toadd=function(){
                $("#myModal").modal("show");
                // $scope.entity = {}; //清空数据
                $scope.entity.uid="";
                $scope.entity.uname="";
                $scope.entity.upwd="";
                $scope.entity.rid="0";
                $scope.getAllRoles(); //查询所有的角色
            }

            //点击修改按钮并赋值打开模态框
            $scope.toupdate=function (uid) {
                $("#myModal").modal("show");
                $http.get("/tuser/getUsersById/"+uid).success(function (data) {
                    $scope.entity=data;
                    $scope.getAllRoles(); //查询所有的角色
                })
            }

            //添加或修改数据
            $scope.addorupadte=function () {
                $http.post("/tuser/addorupadte",$scope.entity).success(function (data) {
                    layer.msg(data.msg,{icon:6});
                    $scope.searchAll2(); //查询完成后再查询当前页的数据
                    $("#myModal").modal("hide");
                });
            }

            //全选或全不选
            $scope.selectIds=[]; //用户勾选UID的集合
            $scope.selectall=function(){
                $scope.selectIds=[]; //用户勾选UID的集合
                if ($scope.checked){
                    //如果全选中,将所有的ID加入集合,并全部选中当前页
                    for (var i = 0; i <$scope.list.length; i++) {
                        $scope.selectIds.push($scope.list[i].uid);
                        $scope.list[i].item=true;
                    }
                }else {
                    //如果不全选,全部不选中,集合赋值为空
                    for (var i = 0; i <$scope.list.length; i++) {
                        $scope.list[i].item=false;
                    }
                    $scope.selectIds=[];
                }
            }

            //单选
            $scope.selectid=function($event,uid){
                if($event.target.checked){
                    $scope.selectIds.push(uid);  //向集合中添加元素
                }else {
                    var index=$scope.selectIds.indexOf(uid); //查找值的位置
                    $scope.selectIds.splice(index,1)
                    //参数1:移除的位置 参数2:移除的个数
                }
            }
            //批量删除
            $scope.piliang=function () {
                if ($scope.selectIds.length==0) {
                    layer.msg("至少选择一项!", {icon: 7})
                } else {
                    layer.confirm("您确定批量删除吗?",{icon: 3, title:"系统提示:"},
                        function(){
                            $http.post("/tuser/piliang",$scope.selectIds).success(function (data) {
                                layer.msg(data.msg,{icon:6}); //5代表哭脸
                                $scope.searchAll2();
                                $scope.selectIds=[]; //删除成功后集合重新赋值为空
                            })
                        })
                }
            }
        })
    </script>
</head>
<body>
<div class="container">
    <div class="panel panel-success">
        <div class="panel-heading">
            <h1>使用SpringBoote整合SSM+Bootstrap+ajs框架完成
            </h1>
        </div>
        <!--ng-app 此div归ajs管理-->
        <div class="panel-body" ng-app="myApp" ng-controller="myCtrl" ng-init="getAllUsers()">
            <form class="form-inline">
                用户名称: <input class="form-control" ng-model="searchEntity.uname">
                角色:<select class="form-control" ng-model="searchEntity.rid" ng-init="searchEntity.rid='0'" ng-options="r.rid as r.rname for r in roles"></select>
                <a href="#" class="btn btn-success" ng-click="searchAll2()">综合查询</a>
                <a href="#" class="btn btn-success" ng-click="toadd()">添加用户</a>
                <a href="#" class="btn btn-danger" ng-click="piliang()">批量删除</a>
            </form>
            <h1></h1>
            <table class="table table-striped table-condensed table-bordered table-hover text-center">
                <tr>
                    <td><input type="checkbox" ng-change="selectall()" ng-model="checked">全选</td>
                    <td>序号</td>
                    <td>用户ID</td>
                    <td>用户名字</td>
                    <td>用户密码</td>
                    <td>角色编号</td>
                    <td>操作</td>
                </tr>
                <tr ng-repeat="u in list">
                    <td><input type="checkbox" ng-click="selectid($event,u.uid)" ng-model="u.item"></td>
                    <td>{{$index+1}}</td>
                    <td>{{u.uid}}</td>
                    <td>{{u.uname}}</td>
                    <td>{{u.upwd}}</td>
                    <td>{{u.rid}}</td>
                    <td>
                        <a href="#" class='btn btn-success' ng-click="toupdate(u.uid)">修改</a>
                        <a href="#" class='btn btn-danger' ng-click="deleteUsers(u.uid)">删除</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="7">
                        <!--自动分页标签-->
                        <tm-pagination conf="paginationConf"></tm-pagination>
                    </td>
                </tr>
            </table>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form class="form-horizontal">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel" style="text-align: center">请输入</h4>
                            </div>
                            <div class="modal-body">
                                <input type="hidden"  name="uid" ng-model="entity.uid">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">用户名字</label>
                                    <div class="col-sm-6">
                                        <input type="text"class="form-control"  name="uname" placeholder="请输入用户名" ng-model="entity.uname">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label  class="col-sm-4 control-label">用户密码</label>
                                    <div class="col-sm-6">
                                        <input type="password" class="form-control" name="upwd" placeholder="请输入密码" ng-model="entity.upwd">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">用户角色</label>
                                    <div  class="col-sm-6">
                                        <select class="form-control" ng-model="entity.rid"  ng-init="entity.rid='0'" ng-options="r.rid as r.rname for r in roles2"></select>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary btn-lg btn-block" ng-click="addorupadte()">提交</button>
                            </div>
                        </form>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </div>
        <div class="panel-footer text-right">
            所有用户列表
        </div>
    </div>
</div>
</body>
</html>